<template>
  <div class="all">
    <Header />
    <div class="allitem">
      <div
        class="item"
        :class="'item' + index"
        v-for="(item, index) in liveStreamingRoomList"
        :key="index"
        @click="itemCLickHandel(item)"
      >
        <div class="t"><img :src="QNURL + item?.cover" alt="" /></div>
        <div class="b">
          <div class="b_title">{{ item.roomName }}</div>
          <div class="info">
            <span class="name">{{ item?.nickName }}</span>
            <span class="time">{{ item?.orderTime }}</span>
            <span
              class="yy"
              @click="orderLiveStreamingFun(item)"
              v-if="item?.status == 0 && item?.userId != userInfo?.userId"
              >立即预约</span
            >
            <span class="zb" v-if="item?.status == 1">正在直播</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/header/Header.vue";
import { useRouter } from "vue-router";
import { QNURL } from "@/config/urlConfig";
import { ref, onMounted, computed } from "vue";
import { getAllLiveStreaming } from "@/api/liveStreaming";
import { useUserStoreHook } from "@/store/modules/user";

const userStore = useUserStoreHook();

const userInfo = computed(() => userStore.getUserInfo);

const router = useRouter();

const liveStreamingRoomList = ref<any>([]);
async function getLiveStreamingRoomListFun() {
  const res = await getAllLiveStreaming();
  if (res.code == 201) return;

  liveStreamingRoomList.value = res.data;

  const _len = liveStreamingRoomList.value?.length;
}
onMounted(() => {
  getLiveStreamingRoomListFun();
});
defineProps({
  liveStreamingRoomList: {
    type: Array as () => Array<any>,
    default: () => []
  }
});

function itemCLickHandel(item: any) {
  if (item.status == 1) {
    router.push({
      path: "/live_streaming",
      query: {
        id: item.id
      }
    });
  }
}

const emit = defineEmits(["orderLiveStreamingFun"]);
function orderLiveStreamingFun(item: any) {
  emit("orderLiveStreamingFun", item);
}
</script>

<style scoped lang="scss">
.all {
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-color);
  .allitem {
    width: 1200px;
    display: flex;
    flex-wrap: wrap;
    margin: 20px auto;
  }
  .item {
    height: 200px;
    width: 280px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 1px 1px #dedfe0;
    // display: inline;
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;

    &:nth-last-child {
      margin-right: 0;
    }

    img {
      border-radius: 5px;
    }

    .t {
      width: 100%;
      height: 70%;
    }

    .b {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      padding: 5px 10px;

      &_title {
        font-size: 15px;
        transition: all 0.3s;

        &:hover {
          color: #ff6633;
        }
      }

      .info {
        font-size: 12px;
        margin-top: 5px;

        .name {
          margin-right: 5px;
          color: #666;
          border-right: 1px solid #ccc;
          padding-right: 5px;
        }

        .zb {
          font-size: 15px;
          color: red;
          margin-right: 5px;
        }

        .time {
          color: #666;
        }

        .yy {
          margin-left: 10px;
          font-size: 13px;
          color: #409eff;
        }
      }
    }
  }
}
</style>
